import { patch } from "./vdom/patch";

export function lifeCycleMixin(Vue) {
  // console.log('lifeCycleMixin')
  Vue.prototype._update = function (vnode) {
    const vm = this;
    // 将虚拟 DOM 转换成真实 DOM ，将当前的节点替换掉以前的节点
    vm.$el = patch(vm.$el, vnode); // 虚拟节点（vnode）创建出真实节点，替换真实节点（vm.$el, div id="app"）
  }
}

/**
 * 挂在组件入口
 * @param {*} vm vdom
 * @param {*} el elment
 */
export function mountComponent(vm, el) {
  // console.log('mountComponent');
  vm.$el = el; // 挂载一下真实 DOM，后续使用
  const options = vm.$options;

  // 渲染页面，无论是渲染还是更新都会要调用该函数
  const updateComponent = () => {
    const vnode = vm._render(); // 调用 render 方法返回的虚拟 DOM
    vm._update(vnode); // 将虚拟 DOM 转换成真实 DOM
  }

  // 观察者模式, 更新组件
  updateComponent();
}